<template>
 <div class="top" >
     <div class="person"></div>
     <div class="potato">
        <p class="potato_one">普通用户</p>
        <p class="potato_two">svip</p>
        
     </div>
 </div>
 <div class="content">
   <p>我的资产</p>
   <div class="zero">
    <dl>
    <dd>￥0</dd>
    <dt>余额</dt> 
   </dl>
   <dl>
    <dd>0</dd>
    <dt>红包</dt> 
   </dl>
   <dl>
    <dd>0</dd>
    <dt>优惠券</dt> 
   </dl>
   <dl>
    <dd>0</dd>
    <dt>积分</dt> 
   </dl>
   <dl>
    <dd>0</dd>
    <dt>礼品卡</dt> 
   </dl>
   </div>
   
 </div>
 <div class="gray"></div>

 <van-grid column-num="3">
  <van-grid-item icon="label-o" text="我的订单" />
  <van-grid-item icon="friends-o" text="账号管理" />
  <van-grid-item icon="phone-o" text="我的手机号" />
  <van-grid-item icon="shopping-cart-o" text="周六一起拼" />
  <van-grid-item icon="gem" text="会员俱乐部" />
  <van-grid-item icon="friends-o" text="账号管理" />
  <van-grid-item icon="service-o" text="帮助与客服" />
 
 
  
</van-grid>
<van-cell is-link @click="showPopup" ><van-button  type="primary"   size="large" class="buttonz"  >退出登录</van-button></van-cell>
<van-popup v-model:show="show" :style="{ padding: '64px' }">
    <van-button  type="primary"   size="large" class="buttonz" @click="Canclebtn">取消</van-button>
    <van-button  type="primary"   size="large"  class="buttonz" color="blue" @click="Outbtn">退出</van-button>
</van-popup>

</template>
<script lang="ts" setup>
import { ref } from 'vue';
  const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const Outbtn=()=>{
        location.href="https://m.you.163.com/u/login?callback=https%3A%2F%2Fm.you.163.com%2Fcart";
    }
    const Canclebtn=()=>{
        show.value=false;
    }
</script>
    

<style scoped>
.top{
    width: 100%;
    height: 20%;
    background-color:#F5CF87;
    position:relative;
}
.top .person{
    position: absolute;
    left: 10px;
    top: 20px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: rgb(246, 246, 247);
}
.top .potato{
    position: absolute;
    top: 40px;
    left: 100px;

}
.top .potato .potato_one{
     color: white;
     font-weight: bold;
     font-size: 16px;
}
.top .potato .potato_two{
    padding-top: 5px;
    color: rgb(179, 152, 4);
    font-weight: bold;
    font-size: 14px;
}
.content{
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    font-size: 12px;
    
}
.content .zero{
    display: flex;
    text-align: center;
    justify-content: space-between;
}
.content p{
    padding:15px 0;
}
.gray{
    width: 100%;
    height: 13px;
    background-color: rgb(240, 240, 240);
}
.buttonz{
    background-color: #fff;
    border: none;
    color: black;
}

</style>
